import React from 'react';
import { NavLink } from 'react-router-dom';
import { Counter } from '../../../../components/Form';

import styles from './index.module.less';

export default class Head extends React.Component {
  state={
    path: '',
    surplus: 100,
    count: 1,
    soldOut: require('../../../../asset/images/soldout.png'),
    list: [
      {
        key: 1,
        path: require('../../../../asset/images/market/h1.png'),
      },
      {
        key: 2,
        path: require('../../../../asset/images/market/h2.png'),
      },
      {
        key: 3,
        path: require('../../../../asset/images/market/h3.png'),
      },
      {
        key: 4,
        path: require('../../../../asset/images/market/h4.png'),
      },
      {
        key: 5,
        path: require('../../../../asset/images/market/h5.png'),
      },
      {
        key: 6,
        path: require('../../../../asset/images/market/h6.png'),
      },
      {
        key: 7,
        path: require('../../../../asset/images/market/h7.png'),
      },
      {
        key: 8,
        path: require('../../../../asset/images/market/h8.png'),
      },
    ],
  };

  componentDidMount() {
    this.setState(prevState => {
      const { list } = prevState;

      return {
        path: list[0].path,
      };
    });
  }

  onLeftClick=() => {
    this.startLeftRun();
  };
  onRightClick=() => {
    this.startRightRun();
  };
  // 截取首部添加到尾部
  startRightRun = () => {
    this.setState(prevState => {
      const { list } = prevState;
      // console.log(list);
      const b = list.splice(0, 5);
      // console.log(b);
      let i;
      for (i = 0; i < b.length; i++) {
        list.push(b[i]);
      }
      // console.log(list);
      return { list };
    });
  };
  // 截取尾部,添加到首部
  startLeftRun = () => {
    this.setState(prevState => {
      const { list } = prevState;
      // console.log(list);
      const b = list.splice(-5);
      // console.log(b);
      let i;
      for (i = b.length - 1; i >= 0; i--) {
        list.unshift(b[i]);
      }
      // console.log(list);
      return { list };
    });
  };
  // 鼠标滑入,图片变化
  imgChange = e => {
    this.setState(prevState => {
      const { path } = prevState;

      return {
        path: e,
      };
    });
  };
  render() {
    const { path, surplus, count, list, soldOut } = this.state;
    return (
      <div className={styles.head}>
        <div className={styles.left + ' ' + styles.pullLeft}>
          <div className={styles.img}>
            <img src={path} alt="" className={styles.imgOne}/>
            <img src={soldOut} alt="" className={styles.imgTwo}/>
          </div>
          <div className={styles.imgS}>
            <div className={styles.div1 + ' ' + styles.pullLeft} onClick={this.onLeftClick}>
              <i className={'iconfont icon-zuojiantou'}></i>
            </div>
            <div className={styles.div2 + ' ' + styles.pullLeft}>
              <React.Fragment>
                {
                  list.map(item => {
                    return (
                      <img src={item.path} alt="" key={item.key} onMouseEnter={this.imgChange.bind(this, item.path)}/>
                    );
                  })
                }
              </React.Fragment>
            </div>
            <div className={styles.div3 + ' ' + styles.pullLeft} onClick={this.onRightClick}>
              <i className={'iconfont icon-youjiantou1'}></i>
            </div>
          </div>
          <div className={styles.text}>
            <span className={styles.span1}>
              <i className={`iconfont icon-shoucang1 ${styles.icon}`}></i> 收藏
            </span>
            <span className={styles.span2}>
              <i className={`iconfont icon-fenxiang ${styles.icon}`}></i> 分享
            </span>
            <span className={styles.span3}>举报</span>
          </div>
        </div>
        <div className={styles.right + ' ' + styles.pullLeft}>
          <p className={styles.text}>
            【定制】65MN冷轧带钢 50#冷轧带钢光亮带 现货通用过磅带钢定做厂家直销
          </p>
          <p className={styles.activeHint}>
            【10月13日0点-14日0点：今日必抢 爆款直降仅3200元/吨】
          </p>
          <div className={styles.details}>
            <p className={styles.p1}>
              <span className={styles.span1}>价格</span> <span className={styles.span2}>3200-3500 元/吨</span>
            </p>
            <p>
              <span className={styles.span1}>起购量</span> <span className={styles.span3}>1吨</span> <span>统一编码</span> <span className={styles.span3}>石棉板xxxxxxx</span>
            </p>
            <p>
              <span className={styles.span1}>库存量</span> <span className={styles.span3}>201吨</span> <span>发货时间</span> <span className={styles.span3}>承诺7天内发货</span>
            </p>
            <p>
              <span className={styles.span1}>发货地</span> <span className={styles.span3}>大连</span> <span>供货方式</span> <span className={styles.span3}>现货</span>
            </p>
          </div>
          <div className={styles.favorable}>
            <div className={styles.favorableLeft}>
              <div className={styles.span1}>
              优惠
              </div>
            </div>
            <div className={styles.favorableRight}>
              <div className={styles.favorable2}>
                <i className={`iconfont icon-youhuiquan ${styles.icon}`}>
                </i>
                <span className={styles.FullReduction}>满100减10</span>
                <span className={styles.get}>领取</span>
              </div>
              <div className={styles.favorable2}>
                <i className={`iconfont icon-youhuiquan ${styles.icon}`}>
                </i>
                <span className={styles.FullReduction}>满100减10</span>
                <span className={styles.get}>领取</span>
              </div>
              <div className={styles.favorable2}>
                <i className={`iconfont icon-youhuiquan ${styles.icon}`}>
                </i>
                <span className={styles.FullReduction}>满100减10</span>
                <span className={styles.get}>领取</span>
              </div>
              <div className={styles.favorable2}>
                <NavLink to='#'>更多></NavLink>
              </div>
            </div>
          </div>
          <div className={styles.model}>
            <div className={styles.modelLeft + ' ' + styles.pullLeft}>
              <div className={styles.text}>
                规格
              </div>
            </div>
            <div className={styles.modelRight + ' ' + styles.pullLeft}>
              <div className={styles.detail}>
                <div className={styles.detailText}>
                  <div className={styles.num}>颗粒</div>
                  <div className={styles.num}>99.00元</div>
                  <div className={styles.num}>含税</div>
                  <div className={styles.nums}>700件可售</div>
                </div>
                <div className={styles.Counter}>
                  <Counter max={surplus} value={count} />
                </div>
              </div>
              <div className={styles.detail}>
                <div className={styles.detailText}>
                  <div className={styles.num}>颗粒</div>
                  <div className={styles.num}>99.00元</div>
                  <div className={styles.num}>不含税</div>
                  <div className={styles.nums}>700件可售</div>
                </div>
                <div className={styles.Counter}>
                  <Counter max={surplus} value={count} />
                </div>
              </div>
            </div>
          </div>
          <div className={styles.cart}>
            <NavLink to={{ pathname: '/shopping-cart', state: { day: 'Friday' } }} className={styles.now}>
              立即订购
            </NavLink>
            <div className={styles.pullCart}>
              加入购物车
            </div>
          </div>
          <div className={styles.remake}>
            <p>
              <span className={styles.span1}>物流方式</span> <span className={styles.span3}>需要卖家发货 上门自提</span>
            </p>
          </div>
          <div className={styles.remake}>
            <p>
              <span className={styles.span1}>结算方式</span> <span className={styles.span3}>平台担保</span> <span>发布日期</span> <span className={styles.span3}>2019年9月19日</span>
            </p>
          </div>
        </div>
      </div>
    );
  }
}
